import * as React from 'react';
import {Editor} from '@tinymce/tinymce-react';
import {Editor as TinyMCEEditor} from 'tinymce';

export interface EditorProps {

}

class EditorPage extends React.Component<EditorProps, any> {
  static propTypes = {};
  static defaultProps = {};
  state = {
    content: '',
  }
  handleEditorChange = (content: string, editor:TinyMCEEditor) => {
    console.log('Content was updated:', content, editor);
    this.setState({content});
  };

  render() {
    return (
      <div>
        <Editor
          init={{
            height: 500,
            language: 'zh_CN',
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount',
            ],
            toolbar:
              'undo redo | formatselect |fontselect fontsizeselect | bold italic backcolor forecolor | \
              alignleft aligncenter alignright alignjustify | \
              bullist numlist outdent indent | removeformat | help',
          }}
          onEditorChange={this.handleEditorChange}
        />
      </div>
    )
  }
}

export default EditorPage;

